<template>
<!-- 个人中心 -->
    <div class="fa boss">
         <div class="grtop">
            <h3>个人中心</h3>
            <div class="grtop-item">
                <img src="../assets/img/头像.jpg" alt="">
                <p>咖啡猫</p>
            </div>
        </div>
        <div class="mybottom">
            <div class="my">
                <p>我的收藏<span><svg t="1667300745037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3217" width="20" height="20"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" p-id="3218"></path></svg></span></p>
                <p>我的作品<span><svg t="1667300745037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3217" width="20" height="20"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" p-id="3218"></path></svg></span></p>
            </div>
            <div class="ls">
                <p>浏览历史<span><svg t="1667300745037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3217" width="20" height="20"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" p-id="3218"></path></svg></span></p>
                <p>消息通知<span><svg t="1667300745037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3217" width="20" height="20"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" p-id="3218"></path></svg></span></p>
                <p>意见反馈<span><svg t="1667300745037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3217" width="20" height="20"><path d="M320 885.333333c-8.533333 0-17.066667-4.266667-23.466667-10.666666-12.8-12.8-10.666667-34.133333 2.133334-44.8L654.933333 512 298.666667 194.133333c-12.8-10.666667-14.933333-32-2.133334-44.8 10.666667-12.8 32-14.933333 44.8-2.133333l384 341.333333c6.4 6.4 10.666667 14.933333 10.666667 23.466667 0 8.533333-4.266667 17.066667-10.666667 23.466667l-384 341.333333c-6.4 6.4-12.8 8.533333-21.333333 8.533333z" p-id="3218"></path></svg></span></p>
            </div>
            <div class="al">
                <button @click="dellocal">注销登录</button>
            </div>
        </div>
         <div class="bottom container">
        <ul>
            <li>
            <router-link tag="a" to="/home">
                <span id="bottom-home"></span>
                <p>首页</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/init">
                <span id="bottom-top"></span>
                <p>排行</p>
            </router-link>
            </li>
            <li>
            <router-link tag="a" to="/classify">
                <span id="bottom-list"></span>
                <p>分类</p>
            </router-link>
            </li>
            <li>
                <router-link tag="a" to="/info"  >
                <span id="bottom-recipe"></span>
                <p>资讯</p>
                </router-link>
            </li>
            <li  class="con">
            <router-link tag="a" to="/my">
                <span id="bottom-user"></span>
                <p>我的</p>
            </router-link>
            </li>
        </ul>
        </div>
        <!-- <transition
                @before-enter="beforeEnterFun"
                @enter="enterFun"
                @after-enter="afterEnterFun"
                >
                <div v-if="flag" class="commet">
                    <div class="infobox">
            <h1>美食资讯</h1>
            <div class="infolist" v-for="(item,index) in data" :key="index" @click="jop">
                <h2> {{item.top}}</h2>
                    <div class="infoitem">
                                <img :src="item.img" alt="">
                                <p>{{item.p}} </p>
                            </div>
                            <p class="info-text">
                                    <span class="time fa">{{item.s}}</span>
                                    <a>{{item.a}}</a>
                                    <a>{{item.a1}}</a>
                            </p>
                        </div>
                    </div>
                </div>
        </transition> -->
    </div>
</template>

<script>
    export default {
        methods:{
            // 注销登录
            dellocal(){
                window.localStorage.removeItem("token");
                this.$router.push("/my")
            }
        }
    }
</script>

<style lang="scss" >
 @import "../assets/css/init.css";
 .boss{
    background-color: #f7f7f7;
 }
.grtop{
            max-width: 750px;
            min-width: 350px;
            width: 100%;
            height: 200px;
            margin: 0 auto;
            position: relative;
        }
        .grtop::before{
            content: "";
            max-width: 750px;
            min-width: 350px;
            width: 100%;
            height: 200px;
            margin: 0 auto;
            background: url(../assets/img/bj01.jfif) no-repeat;
            background-size: 100%;
            filter: blur(4px);
            position: absolute;
            top: 0;
        }
        .grtop h3{
            position: absolute;
            top: 0;
            width: 100%;
            font-size: 20px;
            color: rgb(40, 39, 39);
            text-align: center;
            font-weight: 400;
        }
        .grtop .grtop-item{
            width: 100%;
            height: 100px;
            margin-top: -50px;
            position: absolute;
            top: 50%;
            width: 100%;
            font-size: 20px;
            color: #fff;
            text-align: center;
        }
        .grtop .grtop-item img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
        }
        .grtop .grtop-item p{
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: #fff;
            text-align: center;
        }
        .mybottom{
            background-color: #eff1f4;
            padding: 0px 8px;
        }
        .mybottom .my{
            width: 100%;
            margin-top: 20px;
            box-shadow:3px 0px 10px #0606064f ;
        }
        .mybottom .my p{
            padding: 8px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            color: #050505;
            background-color: #fff;
            border-bottom: 1px solid #0606064f;
            position: relative;
        }
        .mybottom .my span{
            position: absolute;
            right: 8px;
            svg{
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
        }
        .mybottom .ls{
            width: 100%;
            margin-top: 20px;
            box-shadow:3px 0px 10px #0606064f ;
        }
        .mybottom .ls p{
            padding: 8px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
            color: #050505;
            background-color: #fff;
            border-bottom: 1px solid #0606064f;
            position: relative;
        }
        .mybottom .ls span{
            position: absolute;
            right: 8px;
            svg{
                width: 16px;
                height: 16px;
                vertical-align: middle;
            }
        }
        .mybottom .al {
            width: 100%;
            text-align: center;
            padding: 50px 0px;
        }
        .mybottom .al button{
            width: 120px;
            height: 40px;
            font-size: 18px;
            margin: 0 auto;
            background-color: #e2143f;
            border-radius: 10px;
            color: #fff;
            border: 0;

        }
</style>